<script lang="ts" setup="">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

let { width, height } = defineProps({
    width: {
        type: String,
        default: '900px'
    },
    height: {
        type: String,
        default: '400px'
    }
})

const myEcharts = echarts,
    categoryChart = ref<HTMLElement>()

onMounted(() => {
    initChart()
})

function initChart() {
    let chart = myEcharts.init(categoryChart.value as unknown as HTMLElement)
    chart.setOption({
        xAxis: {
            type: 'category',
            data: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
            ]
        },
        tooltip: {
            trigger: 'axis'
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    820, 932, 901, 934, 1290, 1330, 1320, 801, 102, 230, 4321,
                    4129
                ],
                type: 'line',
                smooth: true
            }
        ]
    })
    window.onresize = function () {
        chart.resize()
    }
}
</script>

<template>
    <div
        ref="categoryChart"
        id="categoryChart"
        :style="{ width, height }"
    ></div>
</template>

<style lang="scss" scoped></style>
